<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row show-summary :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" prop="store_name" label="门店名称"></el-table-column>
                <el-table-column align="center" prop="hai_money" label="嗨币支付"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getBrandList,
        getStoreList,
    } from "@/api/finance/hai_pay.js";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                total: null,
                listLoading: false,
                brandList: [],
                storeList: [],
                formInline: {
                    store: '',
                    start_time: '',
                    end_time: ''
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        created() {
            this.getStore()
        },
        methods: {
            getStore() {
                getStoreList({ category_id: 312 }).then(response => {
                    this.storeList = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store = this.storeList[0].id;
                        }
                    }
                    if (this.list == null) {
                        this.searchClick()
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>